<template>
    <ul class="store_shop_list" v-if="otherGoods">
        <li class="store_shop_info" v-for="(item,index) in otherGoods" :key="item.goods_id" v-if="item.status">
            <img v-if="item.images" :src="$config.baseUrl + item.images[0].file_path" alt="" @click="handleShopInfo(item.goods_id)">
            <div class="store_shop_produce">
                <p class="desc">
                    {{item.title}}
                </p>
                <div class="price">
                    <p><span style="font-weight:200;color:rgba(255,91,5,1);">¥</span> {{item.price}}</p>
                    <div class="shop_car" @click="handleAddCar(item.goods_id,true,0)">
                        <img src="../assets/img/shop_car.png" alt="">
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>

<script>
    import { getToken } from '../libs/http';
    import http from '../libs/http';
    // import {mapState} from "vuex";

    export default {
        name: 'shop_list',
        props:['shop_id'],
        data(){
            return{
                otherGoods:[]
            }
        },
        mounted(){
            if(sessionStorage.getItem('shopId')){
                this.apiGet('api/goods/paginate?shop_id=' + sessionStorage.getItem('shopId')).then((res) => {
                    console.log(res);
                    this.otherGoods = res.data;
                });
            }else{
                this.apiGet('api/goods/paginate?shop_id=' + this.shop_id).then((res) => {
                    console.log(res);
                    this.otherGoods = res.data;
                });
            }

        },
       /* computed:{
            ...mapState({
                otherGoods: state => state.goods.otherGoods,
            }),
        },*/
        methods:{
            handleShopInfo(id) {
                /* console.log(this.$route.path)
                const token = getToken();*/
                /*if(!token){
                    this.$router.push({
                        name: 'login',
                        query:{name:'id'}
                    });
                }else{*/
                if (this.$route.path !== '/index') {
                    this.$emit('on-handle-shop', id)
                } else {
                    this.$router.push({
                        name: 'shop_info',
                        query: {
                            id: id,
                            task_order_id:sessionStorage.getItem('task_order_id')
                        }
                    })
                }
            // }
                // this.$emit('on-handle-shop',id)
            },
            handleAddCar(id,show,coc){
                const token = getToken();
                if(!token){
                    this.$router.push({
                        name: 'login',
                        query:{name:'index'}
                    });
                }else{
                    this.apiGet('api/goods/info/' + id).then((res) => {
                        if(res){
                            this.$emit('on-handle-addCar',res,show,coc)
                        }
                    });
                }
            }
        },
        mixins:[http]
    }
</script>

<style lang="stylus">
    add(a)
        a/2
    .store_shop_list
        .store_shop_info
            width: add(315px);
            background: #fff;
            display: inline-block;
            margin: add(40px) add(40px) 0 0;
            border-radius:add(10px) add(10px) 0 0;
            img
                width: add(315px);
                height:add(302px);
            .store_shop_produce
                padding: add(16px) add(12px) add(19px) add(10px);
                .desc
                    font-size:add(24px);
                    color:rgba(0,0,0,1);
                    line-height add(32px)
                    margin-bottom add(7px)
                .price
                    display: flex;
                    justify-content: space-between;
                    p
                        align-self: flex-end;
                        font-size:add(30px);
                        font-weight:800;
                        color:rgba(255,91,5,1);

                    .shop_car
                        align-self: flex-end;
                        img
                            width: add(25px);
                            height: add(25px);

</style>
